<style lang="scss">
.test-item {
  width: 120px; overflow: hidden
}
</style>

<template>
  <div>
    <z-space vertical>
      <z-ellipsis class="test-item">{{testText}}</z-ellipsis>

      <zw-truncate text="1111111111111sdsdsds" :num="10"></zw-truncate>
    </z-space>

    <h3>tooltip</h3>
    <el-tooltip effect="dark" placement="top">
      <div slot="content">{{testText}}</div>
      <div style="display: inline-flex;"><z-ellipsis show-title="none" class="test-item">{{testText}}</z-ellipsis></div>
    </el-tooltip>


    <h3>多行</h3>

    <p class="demo"><a href="https://codepen.io/andypinet/pen/ExQGzGW">demo</a></p>
    <p>https://github.com/Frondor/vue-line-clamp</p>

    <RemoteFileViewer file="example/views/ellipsis/base.vue"></RemoteFileViewer>
  </div>
</template>

<script>

import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";
export default {
  components: {RemoteFileViewer},
  data() {
    return {
      testText: '|这里有一些文字这里有一些文字这里有一些文字字这里有一些文字字这里有一些文字|'
    }
  },
  setup() {
    return {
    }
  }
}
</script>
